<template>
  <div class="organizer-profile">
    <!-- 顶部标题 -->
    <div class="header">益起行</div>

    <!-- 头像部分 -->
    <div class="avatar-container">
      <van-image
        :src="organizer.avatar"
        width="20vh"
        height="20vh"
        fit="cover"
        round
        class="avatar"
      />
    </div>

    <!-- 组织名部分 -->
    <van-cell title="组织名" :value="organizer.name" class="info-cell" />

    <!-- 举办志愿活动次数部分 -->
    <van-cell
      title="举办活动次数"
      :value="organizer.volunteerEventCount"
      class="info-cell"
    />

    <!-- 修改组织资料 -->
    <van-cell
      clickable
      @click="goToEditProfile"
      title="修改组织资料"
      center
      is-link
      class="edit-profile-cell"
    />

    <!-- 退出登录 -->
    <van-cell
      clickable
      @click="logout"
      class="logout-cell"
    >
      <template #title>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="quit-icon"
          viewBox="0 0 24 24"
          fill="currentColor"
        >
          <path d="M16 12L13 15V9L16 12ZM5 4H11V6H5V18H11V20H5C3.89 20 3 19.1 3 18V6C3 4.89 3.89 4 5 4ZM21 12L13 19V16H9V8H13V5L21 12Z" />
        </svg>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { Cell, CellGroup, Image } from "vant";
import organizerProfileApi from "@/api/organizerProfile.js";

export default {
  components: {
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-image": Image,
  },
  data() {
    return {
      organizer: {
        avatar: "",
        name: "",
        volunteerEventCount: 0,
      },
    };
  },
  methods: {
    fetchOrganizerProfile() {
      organizerProfileApi.getOrganizerBasicProfile().then((res) => {
        this.organizer.avatar =
          res.pic ||
          "https://volunteersystem.oss-cn-beijing.aliyuncs.com/default.jpeg";
        this.organizer.name = res.name || "未设置";
        this.organizer.volunteerEventCount = res.eventCount || 0;
      }).catch((err) => {
        this.$toast.fail(err.message || "获取组织资料失败");
      });
    },
    goToEditProfile() {
      this.$router.push("/organizer/edit");
    },
    logout() {
      organizerProfileApi.logout();
      this.$router.push("/");
    },
  },
  mounted() {
    this.fetchOrganizerProfile();
  },
};
</script>

<style scoped>
/* 顶部标题 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to right, #007aff, #4a90e2);
  color: white;
  font-size: 3vh;
  text-align: center;
  padding: 2vh 0;
  font-weight: bold;
  z-index: 10;
  box-sizing: border-box;
}

/* 页面容器 */
.organizer-profile {
  padding: 10vh 5% 25vh;
  max-width: 90%;
  margin: 0 auto;
  background: #f8f9fa;
}

/* 头像部分 */
.avatar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 4vh;
}

.avatar {
  border-radius: 50%;
}

/* 单元格部分 */
.info-cell .van-cell__title {
  color: #333;
  font-size: 2.5vh;
}

.info-cell .van-cell__value {
  color: #666;
  font-size: 2.5vh;
}

/* 修改组织资料 */
.edit-profile-cell {
  background: #f1f8ff;
  color: #007aff;
  border-radius: 1vh;
  margin-top: 2vh;
}

/* 自定义退出登录按钮 */
.logout-cell {
  margin-top: 2vh;
  text-align: center;
}

.quit-icon {
  width: 3vh;
  height: 3vh;
  color: red;
}
</style>
